<template>
<div class="common-bg">
<div class="wrap">
  <div class="form">
    <h2>登录</h2>
    <el-form
        :model="loginForm"
        :rules="rules"
        label-width="120px"
        label-position="top"
        ref="ruleForm"
    >
      <el-form-item label="用户名" prop="username">
        <el-input
            prefix-icon="el-icon-user-solid"
            clearable
            v-model="loginForm.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password"
                  prefix-icon="el-icon-lock"
                  show-password
                  clearable
                  @keyup.enter="submitForm('ruleForm')"
                  v-model="loginForm.password"></el-input>
      </el-form-item>

    <div class="opt">
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">登录</el-button>
        <el-button type="default" @click="qqLogin">QQ登录</el-button>
        <el-button @click="$router.push('/register')">注册账号</el-button>
      </el-form-item>
    </div>
    </el-form>
  </div>
  </div>
</div>
</template>

<script>
import { ElLoading } from "element-plus";
import {reactive, ref, toRefs} from "vue";
import {Login} from "../../api/common";
import {useRoute, useRouter} from "vue-router";
import {useStore} from "vuex";
import {error, success, warning} from "../../utils/message";
export default {
  name: "Login",
  setup(){
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    const state = reactive({
      ruleForm: ref(null),
      loginForm:{
        username: '',
        password: '',
      },
      rules:{
        username: [{
          required:true,
          message:"请输入用户名",
          trigger:'blur'
        },{
          min:3,
          max:15,
          message: "请输入3~15个字符",
          trigger: 'blur'
        }],
        password: [{
          required:true,
          message:"请输入密码",
          trigger:'blur'
        }]
      }
    })

    const methods = {
      submitForm(formName) {
        this.$refs[formName].validate((valid)=>{
          if (valid) {
            methods.doLogin();
          } else {
            warning('请检查表单项')
            return false
          }
        })
      },
      qqLogin() {
        QC.Login.showPopup({
          appId: '101932575',
          redirectURI: 'https://me.inzj.cn/#/qqlogin'
        })
        window.opener=null;window.open('','_self');window.close();
      },
      async doLogin(){
        const loading = ElLoading.service({
          lock: true,
          text: 'Loading',
          background: 'rgba(0, 0, 0, 0.7)',
        })
        const { code, data, message } = await Login(state.loginForm)
        if (+code === 200) {
          success(message)
          const targetPath = decodeURIComponent(route.query.redirect)
          if (targetPath.startsWith('http')) {
            // 如果是一个url地址
            window.location.href = targetPath
          } else if (targetPath.startsWith('/')) {
            // 如果是内部路由地址
            router.push(targetPath)
          } else {
            router.push('/')
          }
          store.commit('app/setToken', data)
        } else {
          error(message)
        }
        loading.close()
      }
    }

    return {
      ...toRefs(state),
      ...methods
    }
  }
}
</script>

<style scoped>
.wrap {
  width: 45%;
  height: auto;
  min-width: 360px;
  position: absolute;
  top:0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  background: rgba(255,255,255,.7);
  border-radius: 5px;
}
.form {
  padding:100px 40px;
}
.form h2{
  display: block;
  text-align: center;
  margin: 40px;

}
.opt{
  padding: 35px 0;
}
</style>